<template>
  <div>
    <v-app-bar app color="primary" dark>
      <div class="d-flex align-center">
        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="../assets/logo.png"
          transition="scale-transition"
          width="40"
        />

        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src=""
          transition="scale-transition"
          width="200"
        />
      </div>

      <v-btn class="mx-2" route to="/">Vue {{ dep.vue }}</v-btn>
      <v-btn class="mx-2" route to="/vuetify">Vuetify {{ dep.vuetify }}</v-btn>
      <v-btn class="mx-2" route to="/typescript"
        >Typescript {{ dep.typescript }}</v-btn
      >
      <v-btn class="mx-2" route to="/cesium">Cesium {{ dep.cesium }}</v-btn>

      <v-btn class="mx-2" route to="/classStyle/static/props">ClassStyle</v-btn>
      <v-btn class="mx-2" @click="routerActions">Dynamic-Props</v-btn>
      <v-btn class="mx-2" route to="/compositionAPI">Composition API</v-btn>

      <v-spacer></v-spacer>

      <v-btn
        href="https://github.com/meschg/vue-stack-cesium"
        class="success"
        target="_blank"
      >
        <span class="mr-2">This TEMPLATE on Github</span>
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
    </v-app-bar>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { mapState, mapMutations } from "vuex";
import router from "@/router/router";

// We declare the props separately to make props types inferable.
const AppProps = Vue.extend({
  props: {},
});

@Component({
  components: {},
  // Vuex's component binding helper can use here
  computed: mapState(["count"]),
  methods: mapMutations(["increment"]),
  template: '<button @click="onClick">Click!</button>',
})
export default class AppBar extends AppProps {
  // inital data
  msg: number = 123;
  dynamicProp: string = "Dynamic";
  routerProp: string = "prop";

  dep = {
    "@vue/composition-api": "1.0.0-rc.6",
    axios: "0.21.1",
    cesium: "1.80.0",
    vue: "2.6.12",
    "vue-class-component": "7.2.6",
    "vue-property-decorator": "9.1.2",
    "vue-router": "3.5.1",
    "vue-shortkey": "3.1.7",
    vuetify: "2.4.9",
    vuex: "3.6.2",
    typescript: "4.2.4",
  };

  routerActions() {
    //https://router.vuejs.org/guide/essentials/navigation.html
    //https://router.vuejs.org/guide/essentials/passing-props.html
    let rPar = this.msg;
    // literal string path
    //router.push('home')

    // object
    //router.push({ path: 'home' })

    const propConst = "const456";
    let propLet = "let123";
    // routes do string only
    //let compData: string = "Stringified" + this.msg
    let compData: string = this.dynamicProp;

    // named route
    // Warning: double navigation to the same dynamic props might cause errors
    // TODO: check if route is already active before pushing it
    //router.push({ name: 'ClassStyleHome', params: { routerProp: '', routerProp2: "456" } })
    //router.push({ name: 'ClassStyleHome', params: { routerProp: '123', routerProp2: propConst } })
    //router.push({ name: 'ClassStyleHome', params: { routerProp: propLet, routerProp2: propConst } })
    router.push({
      name: "ClassStyleHome",
      params: { routerProp: compData, routerProp2: propConst },
    });

    // with query, resulting in /register?plan=private
    //router.push({ path: 'register', query: { plan: 'private' } })

    //router.push("classStyle") // -> /user/123
    console.log("Called for router" + this.msg);
  }
}
</script>
